<template>
  <div class="container">
    <router-view></router-view>
    <!-- 底部 -->
    <van-tabbar route active-color="#f00" inactive-color="#000">
      <van-tabbar-item replace to="/taber1">
        <van-icon
          class="iconfont"
          class-prefix="icon"
          slot="icon"
          slot-scope="props"
          :name="props.active?icon.home_active:icon.home_normal"
        ></van-icon>
        <span>首页</span>
      </van-tabbar-item>

      <van-tabbar-item replace to="/taber2">
        <van-icon
          class="iconfont"
          class-prefix="icon"
          slot="icon"
          slot-scope="props"
          :name="props.active?icon.classify_active:icon.classify_normal"
        ></van-icon>
        <span>分类</span>
      </van-tabbar-item>

      <van-tabbar-item replace to="/taber3">
        <van-icon
          class="iconfont"
          class-prefix="icon"
          slot="icon"
          slot-scope="props"
          :name="props.active?icon.cart_active:icon.cart_normal"
        ></van-icon>
        <span>购物车</span>
      </van-tabbar-item>

      <van-tabbar-item replace to="/taber4">
        <van-icon
          class="iconfont"
          class-prefix="icon"
          slot="icon"
          slot-scope="props"
          :name="props.active?icon.mine_active:icon.mine_normal"
        ></van-icon>
        <span>我的</span>
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
export default {
  name: "home",
  data() {
    return {
      active: 0,
      showName: "首页",
      back: true,
      // 对应自定图表名称
      icon: {
        home_normal: "shouye",
        home_active: "shouye1",
        classify_normal: "classify",
        classify_active: "classify2",
        cart_normal: "cart",
        cart_active: "cart2",
        mine_normal: "wode",
        mine_active: "wode2",
      },
    };
  },
  methods: {},
};
</script>

<style scoped lang="scss">
.container {
  width: 100%;
  padding-bottom: 100px;
}
// 修改 NavBar 样式
/deep/ .van-ellipsis {
  color: #ee0a24;
}

/deep/ .van-nav-bar .van-icon {
  color: #ee0a24;
}

/deep/ .van-nav-bar__text {
  color: #ee0a24;
}
/deep/ .van-hairline--bottom::after {
  border-bottom: 1px solid #ccc;
}

.taber_diy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  i {
    font-size: 50px;
  }
}
</style>